<template>
	<div class="hr-main">	
		<section class="section-item">	
			<dy-select></dy-select>
		</section>
		<section class="section-item cc">	
			<div @click="chooseType({name: '在册人力', quotaType:1})" :class="[{'on': trendPost.quotaType == 1}, 'item-part']">
				<p class="txt name">在册人力</p>
				<p class="txt count">{{majorData.onRollCount}}</p>
				<p class="txt busi"><span class="txt-name">业务人力</span>{{majorData.busiCount}}&nbsp;({{majorData.busiRatio}})</p>
				<p class="txt not"><span class="txt-name">非业务人力</span>{{majorData.busiNotCount}}&nbsp;({{majorData.busiNotRatio}})</p>
			</div>
			<div @click="chooseType({name: '业务人力', quotaType:2})" :class="[{'on': trendPost.quotaType == 2}, 'item-part']">
				<p class="txt name">业务人力</p>
				<p class="txt count">{{majorData.busiCount}}</p>
				<p class="txt busi"><span class="txt-name">考核人力</span>{{majorData.examineCount}}&nbsp;({{majorData.examineRatio}})</p>
				<p class="txt not"><span class="txt-name">非考核人力</span>{{majorData.examineNotCount}}&nbsp;({{majorData.examineNotRatio}})</p>
			</div>
			<div @click="chooseType({name: '见习客户数经理比率', quotaType:3})" :class="[{'on': trendPost.quotaType == 3}, 'item-part pt']">
				<p class="part-title">见习客户数经理比率</p>
				<dy-water :opt="majorData.practiceCMagRatio"></dy-water>
				<p class="num">见习客户经理数 {{majorData.practiceCMagCount}}</p>
			</div>
			<div @click="chooseType({name: '业务人力离职率', quotaType:4})" :class="[{'on': trendPost.quotaType == 4}, 'item-part pt']">
				<p class="part-title">业务人力离职率 </p>
				<dy-water :opt="majorData.busiDimissionRatio"></dy-water>
				<p class="num">业务离职数 {{majorData.busiDimissionCount}}</p>
			</div>
			<div @click="chooseType({name: '3个月新人转正率', quotaType:5})" :class="[{'on': trendPost.quotaType == 5}, 'item-part pt']">
				<p class="part-title">3个月新人转正率</p>
				<dy-water :opt="majorData.beRegular3MRatio"></dy-water>
				<p class="num">3个月新人转正数 {{majorData.beRegular3MCount}}</p>
			</div>
			<div @click="chooseType({name: '满编率', quotaType:6})" :class="[{'on': trendPost.quotaType == 6}, 'item-part pt']">
				<p class="part-title">满编率</p>
				<dy-water :opt="majorData.fullFormationRatio"></dy-water>
				<p class="num">编制目标 {{majorData.formationTarget}}</p>
			</div>
		</section>			
		<section class="section-item">	
			<div class="title">{{nowTitle.name}}</div>				
			<chart :options="line1" theme="roma" class="line-charts"></chart>	
		</section>
		<section class="section-item">
			<div class="title" v-if="Object.keys(lineDetail).length">{{nowTitle.name}}分析</div>	
			<chart v-if="((nowTitle.quotaType ? nowTitle.quotaType : 1) == 1 || nowTitle.quotaType == 2) && Object.keys(lineDetail).length" :options="pie1" theme="roma"></chart>	
			<dy-line opt="hrDetail"></dy-line>	
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge, Event, numFormat, classifyNum} from '@/utils/index'

export default {
	name: 'loans',
	data () {	 
		return {				
			numFormat: numFormat,
			majorData: {},
			trendPost: {},	
			pie1: {},
			line1: {},
			line2: {},
		}
	},
	computed: {
		orgId () {
			return this.$store.getters.orgId
		},
		lineDetail () {
			return this.$store.getters.lineDetail
		},		
		nowTitle () {
			return this.$store.getters.nowTitle
		},
	},
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  
    	this.$store.commit('nowTitle', {name: '在册人力', quotaType:1})  	
	},
	watch : {
		orgId ()  {
			this.updata();
		},
		lineDetail (val) {
			if(Object.keys(val).length > 0) {
				let pie1 = {
					legend: {
						data: []
					},
					series : [{ data:[]}]
				}
			
				if(val.reportDetail) {
					val.reportDetail.map((res, index) => {
						pie1.series[0].data.push({name: res.orgName, value: res.quotaValue})
					})		

					pie1.series[0].data = classifyNum(pie1.series[0].data)
					pie1.series[0].data.map(res => {
						pie1.legend.data.push(res.name)
					})
					this.pie1 = merge(this.pie, pie1)
				}	
			}
		},
	},
	methods: {
    	// 更新数据
    	updata () {   	    		
    		this.getHrMajor()
    		this.getHrTrend()   
    	},    	 
    	// 切换九宫格 
    	chooseType (nowTitle) {
    		this.$store.commit("nowTitle", nowTitle)
    		this.getHrTrend()
    	},  	
        // 六宫格数据
        getHrMajor () {       	
        	if(!this.orgId) return

        	api.hrMajor({orgId: this.orgId}).then(data => {  
        		this.majorData = data;
        	})
        }, 	
    	// 趋势报表
    	getHrTrend () {    		
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}    
    		
    		api.hrTrend(this.trendPost).then(data => {  
    			let line1 = {	
    				legend: {data:[]},		
					xAxis :  [{data : data.reportDetail[0].xValueList}],
					series: []
				}

				let line2 = {	
    				legend: {data:[]},		
					xAxis :  [{data : data.reportDetail[0].xValueList}],
					series: []
				}

				// 有百分率的情况
				if(data.reportDetail[0].yValueList[0].match("%")) {
					line1.yAxis = [
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]

					line2.yAxis = [
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]
				}

				data.reportDetail.map((res, index) => {
					let _data = ''
					let _isRatio = false
					// 有百分率的情况
					if(res.yValueList[0].match('%')) {
						_data = []
						_isRatio = true
						res.yValueList.map((r, i) => {
							_data.push(r.replace('%', ''))
						}) 
					} 
						line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName+ (_isRatio ? ' ' : '')}) 
						line1.legend.data.push(res.quotaTypeName + (_isRatio ? ' ' : ''))
				})	
    			this.line1 = merge(this.line, line1)
    		}) 
    	}    	
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.hr-main {
	.section-table {
		padding: 0;
	}

	.item-part {
		padding: 1rem 0;
		line-height: 1rem;
		text-align: center;

		&.pt {
			padding: .5rem 0;
			&>p {
				line-height: 1.4rem;
			}

			.part-title {
				font-weight: bold;
				font-size: .65rem;
			}
		}

		&.on {
			background-color: @on-bg;
		}

		&>p {	
			text-align: left;

			&.name {
				font-size: .65rem;
				font-weight: bold;
				text-align: center;
			}

			&.part-title, &.num {
				text-align: center;
			}

			&.count {
				line-height: 1.2rem;
				font-size: .65rem;
				text-align: center;
			}	

			&.busi, &.not{
				padding-left: 5%;
				white-space: nowrap;
				overflow-x: hidden;
			}

			color: @h1-color;
			font-size: .6rem;
			line-height: 1rem;
		}
	}

	.line-des {
		margin: .6rem 0 .4rem;
		text-align: center;
	}

	.text {
		color: @h1-color;
		width: 80%;
		margin: 0 auto;	
		text-align: center;

		.text-name {
			display: block;
		}
		.text-num {
			display: block;
		}
	}
	.text-left {
		float: left;
	}
	.text-right {
		float: right;
		&.text-up {
			color: @up;
		}
		&.text-down {
			color: @down;
		}
	}

	.section-item {
		&:nth-child(1) {
			margin-bottom: 0;
		}
	}		
	.txt-name{
		padding-right: .2rem;
	}
}
</style>